<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fnx" uri="http://java.sun.com/jsp/jstl/functionsx" %>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="f" uri="http://www.sctv.com/tags/form" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<style>
    td{
        word-break: break-all;
        /*wordw*/
    }
</style>
<script>
  var now=1;
  var big=0;
  var size=10;
  //上一页
  function pre(){
    now=now==1?1:now-1
    initgrid(now,size);
  }
  //下一页
 function next(){
   now=now==big?big:now+1
   initgrid(now,size);
 }
 //查询方法
 function  searchVideos() {
   initgrid(now,size);
 }


  //更改页码
    function changePage(tempSize){
      size=tempSize;
      initgrid(1,size);
    }
  function initgrid(currtPage,pageSize) {
    var nameStr=$("#name").val();
    var startTimeStr=$("#startTime").val();
    var endTimeStr=$("#endTime").val();
    $.ajax({
      url: "/cmscp/core/web_file/getVideoPage.do",
      data: {name:nameStr, startTime:startTimeStr, endTime:endTimeStr,page:currtPage,page_size:pageSize},
      type: "POST",
      success: function (data) {
        var html = "";
        var lists = data.content;

        for (var v = 0; v < lists.length; v++) {
          html += '<tr onclick="getClick(this)"><td style="display: none">'+JSON.stringify(lists[v])+'<td>'+lists[v].id+'</td><td>'+lists[v].name+'</td><td>'+lists[v].duration+'</td><td>'+lists[v].size+'</td><td>'+lists[v].cdnurl+'</td><td>'+lists[v].createDateStr+'</td></tr>';
        }
        $("#bodyContent").html(html);
        $("#totalCount").html(data.totalElements);
        big=data.totalPages;
        $("#now").html(currtPage);
      }
    });
    console.log(currtPage,pageSize);
  }
  //点击获取
  function getClick(dom){
    var josnInfo=$(dom).children().eq(0).html();
    var video=JSON.parse(josnInfo);
//    console.log(video.duration);
    f7OnClick(video.cdnurl,video.name,video.size,video.duration);
    $("#f7_ok").click();
  }
  initgrid(1,10);
</script>
<div class="box-body table-responsive">
    <form id="searchForm" action="/cmscp/core/web_file/getVideoPage.do" method="get" class="form-inline ls-search">
        <div class="form-group">
            <label for="name">视频名称</label>
            <input class="form-control input-sm" type="text" id="name" name="name" value="" style="width:150px;"/>
        </div>
        <div class="form-group">
            <label for="startTime"><s:message code="beginTime"/></label>
            <input class="form-control input-sm" type="text" id="startTime" name="startTime" value="" onclick="WdatePicker({dateFmt:'yyyy-MM-dd'});" style="width:200px;"/>
        </div>
        <div class="form-group">
            <label for="endTime"><s:message code="endTime"/></label>
            <input class="form-control input-sm" type="text" id="endTime" name="endTime" value="" onclick="WdatePicker({dateFmt:'yyyy-MM-dd'});" style="width:200px;"/>
        </div>

        <button class="btn btn-default btn-sm" type="button" style="font-size: 14px;" onclick="searchVideos()">查询</button>

    </form>
    <form method="post">
        <tags:search_params/>


        <table id="pagedTable" style="table-layout: fixed" class="table table-condensed table-bordered table-hover ls-tb">
            <thead id="sortHead" >
            <tr class="ls_table_th">
                <th class="ls-th-sort"><span class="ls-sort" pagesort="id">ID</span></th>
                <th><span class="ls-sort" pagesort="title">视频名称</span></th>
                <th ><span>视频长度</span></th>
                <th><span>文件大小</span></th>
                <th width="500px;"><span>cdn播放地址</span></th>
                <th class="ls-th-sort"><span class="ls-sort" pagesort="createDate">创建时间</span></th>
            </tr>
            </thead>
            <tbody id="bodyContent">

            </tbody>
        </table>
    </form>
    <div class="pull-right" style="padding:0 6px;">
        &nbsp;每页
        <select class="form-control" id="pageSize" onchange="changePage($(this).val())" style="border-radius:4px;padding-left:3px;padding-right:3px;width:60px;display:inline-block;">
            <option>10</option>
            <option>20</option>
            <option>50</option>
            <option>100</option>
            <option>200</option>
            <option>400</option>
            <option>800</option>
        </select>
        条 &nbsp; 共<span id="totalCount"></span>  条
    </div>
    <ul class="pagination pull-right" style="margin:0;">
        <li>
            <a href="javascript:;"  id="pre" onclick="pre()"  aria-label="上一页">
                <span aria-hidden="true">«</span>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <span id="now">5</span>
            </a>
        </li>
        <li>
            <a href="javascript:;" id="next" onclick="next()" aria-label="下一页">
                <span aria-hidden="true">»</span>
            </a>
        </li>
    </ul>
</div>
</tbody>
</table>